<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台管理系统-HTML5后台管理系统</title>
<meta name="keywords"  content="设置关键词..." />
<meta name="description" content="设置描述..." />
<meta name="author" content="DeathGhost" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="javascript/jquery.js"></script>
<script src="javascript/plug-ins/customScrollbar.min.js"></script>
<script src="javascript/plug-ins/echarts.min.js"></script>
<script src="javascript/plug-ins/layerUi/layer.js"></script>
<script src="editor/ueditor.config.js"></script>
<script src="editor/ueditor.all.js"></script>
<script src="javascript/plug-ins/pagination.js"></script>
<script src="javascript/public.js"></script>
</head>
<body>
<div class="main-wrap">
	<div class="side-nav">
		<div class="side-logo">
			<div class="logo">
				<span class="logo-ico">
					<i class="i-l-1"></i>
					<i class="i-l-2"></i>
					<i class="i-l-3"></i>
				</span>
				<strong>模块化后台管理模板</strong>
			</div>
		</div>
		
		<nav class="side-menu content mCustomScrollbar" data-mcs-theme="minimal-dark">
			<h2>
				<a href="index.html" class="InitialPage"><i class="icon-dashboard"></i>数据概况</a>
			</h2>
			<ul>
				<li>
					<dl>
						<dt>
							<i class="icon-columns"></i>综合办公管理<i class="icon-angle-right"></i>
						</dt>
						<dd>
							<a href="car1.html">车辆管理</a>
						</dd>

					</dl>
				</li>
			</ul>
		</nav>
		
		<footer class="side-footer">© DeathGhost 版权所有</footer>
		
	</div>
	<div class="content-wrap">
		<header class="top-hd">
			<div class="hd-lt">
				<a class="icon-reorder"></a>
			</div>
			<div class="hd-rt">
				<ul>
					<li>
						<a href="#" target="_blank"><i class="icon-home"></i>前台访问</a>
					</li>
					<li>
						<a><i class="icon-random"></i>清除缓存</a>
					</li>
					<li>
						<a><i class="icon-user"></i>管理员:<em>DeathGhost</em></a>
					</li>
					<li>
						<a><i class="icon-bell-alt"></i>系统消息</a>
					</li>
					<li>
						<a href="javascript:void(0)" id="JsSignOut"><i class="icon-signout"></i>安全退出</a>
					</li>
				</ul>
			</div>
		</header>
		<main class="main-cont content mCustomScrollbar">
			<div class="page-wrap">
				<!--开始::内容-->
				<section class="page-hd">
					<header>
						<h2 class="title">表格系列展示</h2>
						<p class="title-description">
							表格系列，四种表格样式，隔行换色，鼠标经过等
						</p>
					</header>
					<hr>
				</section>
				车牌号<input type="text" id="carid" class="form-control form-boxed" style="width:200px;">
				车辆用途<input type="text" id="carzy" class="form-control form-boxed" style="width:200px;">
				<input type="button" value="查询" id="btn2" class="btn btn-secondary" ><br>
				使用人<input type="text" id="ename" class="form-control form-boxed" style="width:200px;">
				使用状态<select style="width:auto;" id="shiyongzhuangtaiid">
					<option value="0">请选择状态</option>
					<option value="1">空闲中</option>
					<option value="2">使用中</option>
					<option value="3">维修中</option>
					<option value="4">保养中</option>
				</select>
				<input type="button" value="清空" id="btn3" class="btn btn-secondary" ><br>
				<input type="button" value="添加" id="btn4" class="btn btn-secondary" >
				<input type="button" value="修改" id="btn5" class="btn btn-secondary" >
				<input type="button" value="删除" id="btn6" class="btn btn-secondary" >
				<input type="button" value="刷新" id="btn7" class="btn btn-secondary" >

				<table class="table mb-15">
					<thead>
						<tr>
							<th><input type="checkbox" name="" id="ckid" value="" /></th>
							<th>车牌号</th>
							<th>规格型号</th>
							<th>车辆用途</th>
							<th>使用人</th>
							<th>座位数</th>
							<th>车辆状态</th>
							<th>所属单位</th>
						</tr>
					</thead>
				</table>
				
					
					
				<!--开始::结束-->
			</div>
		</main>
		<footer class="btm-ft">
			<p class="clear">
				<span class="fl">©Copyright 2016 <a href="#" title="DeathGhost" target="_blank">DeathGhost.cn</a></span>
				<span class="fr text-info">
					<em class="uppercase">
						<i class="icon-user"></i>
						author:deathghost
					</em> |
					<em class="uppercase"><i class="icon-envelope-alt"></i>
						更多模板： <a href="http://www.mycodes.net/" target="_blank">源码之家</a>
					</em>
					<a onclick="reciprocate()" class="text-primary"><i class="icon-qrcode"></i>捐赠</a>
				</span>
			</p>
		</footer>
	</div>
</div>

</body>
<script src="javascript/jquery.js"></script>
<script>
	$(function () {
		$("#btn7").click(function (){
			$("table tr:gt(0)").remove();
			$.ajax({
				// 请求的方式
				type:"get",
				url:"http://localhost:8080/car",
				async:true,
				// data:{flag:"selectPro"},
				dataType:'json',
				success:function(data,status,xhr){
					console.log(data);
					// $("p:first").html(data.msg);
					$.each(data,function(i,e){
						var tr = $("<tr/>");
						$("<td/>").html("<input type='checkbox' />").appendTo(tr);
						$("<td/>").html(e.carid).appendTo(tr);
						$("<td/>").html(e.guige).appendTo(tr);
						$("<td/>").html(e.carzy).appendTo(tr);
						$("<td/>").html(e.ename).appendTo(tr);
						$("<td/>").html(e.zuoweishu).appendTo(tr);
						$("<td/>").html(e.shiyongzhuangtai.zhuangtainame).appendTo(tr);
						$("<td/>").html(e.danweiname).appendTo(tr);
						// 行追加到表中
						$("table").append(tr);
					});
				},
				// 失败
				error:function(XMLHttpRequest, textStatus, errorThrown){
				}
			});
		})
		$("#btn2").click(function (){
			var carid=$("#carid").val();
			var carzy=$("#carzy").val();
			var ename=$("#ename").val();
			var shiyongzhuangtaiid=$("#shiyongzhuangtaiid").val()
			var ur;
			if (carid==''){
				ur="/car/null";
			}else {
				ur="/car/"+$("#carid").val();
			}
			if (carzy==''){
				ur=ur+"/null";
			}else {
				ur=ur+"/"+$("#carzy").val();
			}
			if(ename==''){
				ur=ur+"/null";
			}else {
				ur=ur+"/"+$("#ename").val()
			}
			// if (shiyongzhuangtaiid==''){
			// 	ur=ur+"null";
			// }else {
			// 	ur=ur+"/"+$("#shiyongzhuangtaiid").val();
			// }
			ur=ur+"/"+$("#shiyongzhuangtaiid").val();
			$.ajax({
				type: "get",
				url: ur,
				async: true,
				dataType:'json',
				success:function(data,status,xhr){
					console.log(data);
					$("table tr:gt(0)").remove();
					$.each(data,function(i,e){
						var tr = $("<tr/>");
						$("<td/>").html("<input type='checkbox' />").appendTo(tr);
						$("<td/>").html(e.carid).appendTo(tr);
						$("<td/>").html(e.guige).appendTo(tr);
						$("<td/>").html(e.carzy).appendTo(tr);
						$("<td/>").html(e.ename).appendTo(tr);
						$("<td/>").html(e.zuoweishu).appendTo(tr);
						$("<td/>").html(e.shiyongzhuangtai.zhuangtainame).appendTo(tr);
						$("<td/>").html(e.danweiname).appendTo(tr);
						// 行追加到表中
						$("table").append(tr);
					});
				},
				// 失败
				error:function(XMLHttpRequest, textStatus, errorThrown){
				}
			})
		})
	});
	$("#btn4").click(function (){
		window.location.href="insertCar_ajax.html";
	})
</script>
</html>
